<template>
  <div class="container">
    <div class="btn" @click="exportReport">导出年度报告</div>
    <div class="chart1">
      <div style="height: 10px;"></div>
    <div style="font-weight: bold;margin-left: 2.5%;">牛粪各月份处理费用</div>
  <view class="charts-box">
    <div style="height: 10px;"></div>
    <qiun-data-charts 
      type="pie"
      :opts="opts"
      :chartData="chartData"
    />
    <div style="height: 10px;"></div>
  </view>
    </div>
  <div style="height: 20px;"></div>
  <div class="chart2">
    <div style="height: 10px;"></div>
    <div style="font-weight: bold;margin-left: 2.5%;">污水各月份处理费用</div>
    <view class="charts-boxs">
    <div style="height: 10px;"></div>
    <qiun-data-charts 
      type="pie"
      :opts="optss"
      :chartData="chartDatas"
    />
  </view>
  </div>
  </div>
</template>
<script>
import { getReport, exportReport } from '../api/api';
// import {config} from '../../common/request'
export default {
  data() {
    return {
      chartData: {},
      chartDatas: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },
      optss: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      }
    };
  },
  methods: {
    _getReport () {
      getReport({}).then(res => {
        console.log('res-->', res);
        if (res.data.code === 200) {
          let niufenData = []
          let wushuiData = []
          res.data.data.annualReportTransportList.forEach(i => {
            if (i.organicType === '牛粪') {
              niufenData = [
                {
                  "name":"一季度","value": i.firstQuarter.treatmentPrice
                },
                {
                  "name":"二季度","value": i.secondQuarter.treatmentPrice
                },
                {
                  "name":"三季度","value": i.thirdQuarter.treatmentPrice
                },
                {
                  "name":"四季度","value": i.fourthQuarter.treatmentPrice
                },
              ]
            } else if (i.organicType === '污水') {
              wushuiData = [
                {
                  "name":"一季度","value": i.firstQuarter.treatmentPrice
                },
                {
                  "name":"二季度","value": i.secondQuarter.treatmentPrice
                },
                {
                  "name":"三季度","value": i.thirdQuarter.treatmentPrice
                },
                {
                  "name":"四季度","value": i.fourthQuarter.treatmentPrice
                }
              ]
            }
          });
          console.log('niufenData-->', niufenData);
          this.getServerDatas(wushuiData)
          this.getServerData(niufenData)
        }
        console.log(res);
      })
    },
    exportReport () {
      // wx.showLoading();
      wx.request({
        url: 'https://huijuniot.net.cn/prod-api/annual-report/export',
        data: {},
        method: 'post',
        responseType: 'arraybuffer',
        header: {
        Authorization: uni.getStorageSync("token")
      },
        success: function(res){
          // success
          console.log('res-->', res);
          const fs = wx.getFileSystemManager();
          console.log('fs-->', fs);
          fs.writeFile({
            filePath: wx.env.USER_DATA_PATH + "/年度报告.xlsx",
            data: res.data,
            encoding: "binary",
            success (res){
              console.log('rrrrr-->', res);
              wx.openDocument({
                filePath: wx.env.USER_DATA_PATH + "/年度报告.xlsx",
                showMenu: true,
                success: function (res) {
                  // setTimeout(()=>{wx.hideLoading()},500)
                }
              })
            },
            fail: function(err) {
              console.log('eerr-->', err);
            }
          })
        },
        fail: function() {
          // fail
        },
        complete: function() {
          // complete
        }
      })
    },
    getServerDatas(wushuiData) {
      console.log('wushuiData-->', wushuiData);
        let res = {
            series: [
              {
                data: wushuiData
              }
            ]
          };
        this.chartDatas = JSON.parse(JSON.stringify(res));
    },
    getServerData(niufenData) {
      console.log('niufenData-->', niufenData);
        let res = {
            series: [
              
              {
                data: niufenData
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
    },
  },
  onReady() {
    // this.getServerData();
    // this.getServerDatas();
  },
  onShow () {
    this._getReport();
  },
  onLoad(args) {
    // this.exportReport();

  },
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #e3ede2;
  color: #1a512c;
  overflow-y: scroll;
}
.look {
  padding: 3px;
  color: #fff;
  background: #46a164;
  border-radius: 5px;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
// echarts
.charts-box {
    width: 100%;
    height: 320px;
  }
  .charts-boxs {
    width: 100%;
    height: 320px;
  }
  .chart2{
    background: #fff;
    width: 95%;
    margin-left: 2.5%;
    border: 1px solid #1A512C;
    border-radius: 10px;
  }
  .chart1{
    background: #fff;
    width: 95%;
    margin-left: 2.5%;
    border: 1px solid #1A512C;
    border-radius: 10px;
  }
  .btn {
    width: 200rpx;
    height: 60rpx;
    border-radius: 20rpx;
    background: #46a164;
    color: #fff;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20rpx;
    margin-bottom: 20rpx;
  }
</style>
